<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <TotalSales :reportData="reportData" />
    </el-col>
    <el-col :span="6">
      <TotalOrderAmount :reportData="reportData" />
    </el-col>
    <el-col :span="6">
      <UserTransactions :reportData="reportData" />
    </el-col>
    <el-col :span="6">
      <TotalUsers :reportData="reportData" />
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import TotalSales from './TotalSales.vue';
import TotalOrderAmount from './TotalOrderAmount.vue';
import UserTransactions from './UserTransactions.vue';
import TotalUsers from './TotalUsers.vue';

import axios from 'axios';

const reportData = ref({});

const getData = async () => {
  try {
    const res = await axios.get('http://project.x-zd.net:3001/apis/reportdata')
    reportData.value = res.data;
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}

onMounted(() => {
  getData()
})


</script>

<style scoped>
::v-deep span {
  font-size: 14px;
  color: #464545;
}
::v-deep .percent,::v-deep .sales {
  margin-left: 8px;
  font-weight: 500;
}
::v-deep .up {
  display: inline-block;
  border-width: 4px;
  border-color: transparent transparent green transparent;
  border-style: solid;
  transform: translateY(-50%);
  margin-left: 8px;
}
</style>
